<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane class="tab-page" label="事件详情" name="first">
        <el-descriptions class="margin-top" title="事件详情" :column="3" :size="size" border>

          <el-descriptions-item label="事件标题">18100000000</el-descriptions-item>
          <el-descriptions-item label="提出机构">18100000000</el-descriptions-item>
          <el-descriptions-item label="提出时间">18100000000</el-descriptions-item>

          <el-descriptions-item label="用户名">18100000000</el-descriptions-item>
          <el-descriptions-item label="手机号">1810000000000000000000</el-descriptions-item>
          <el-descriptions-item label="居住地">18100000000</el-descriptions-item>

          <el-descriptions-item label="用户名">18100000000</el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item label="居住地">18100000000</el-descriptions-item>

          <el-descriptions-item label="用户名">18100000000</el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item label="居住地">18100000000</el-descriptions-item>

          <el-descriptions-item class-name="my-class" label-class-name="my-label"
            label="居住地">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</el-descriptions-item>

        </el-descriptions>
        <br />
        <el-descriptions class="margin-top" title="附件详情" :column="3" :size="size" border></el-descriptions>
        <el-table :data="tableData" height="200" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
        <br />
        <el-descriptions class="margin-top" title="处理历史" :column="3" :size="size" border></el-descriptions>
        <el-table :data="tableData" height="200" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
        <el-button style="margin: 20px auto">返回</el-button>
      </el-tab-pane>
      <el-tab-pane class="tab-page" label="事件全流程" name="second">
        <el-descriptions class="margin-top" title="事件详情" :column="3" :size="size" border>

          <el-descriptions-item label="用户名">18100000000</el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item label="居住地">18100000000</el-descriptions-item>
          <el-descriptions-item label="居住地">18100000000</el-descriptions-item>

        </el-descriptions>
        <issuesFlowPage></issuesFlowPage>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import issuesFlowPage from './issuesFlowPage'
export default {
  name: "",
  components: {
    issuesFlowPage
  },
  data() {
    return {
      activeName: 'first',
      size: '',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  }
}
</script>

<style scoped>
::v-deep .el-tabs__item {
  font-size: 20px;
  font-weight: 500;
}

::v-deep .el-descriptions-item__content {
  /* 如果下方最大宽度不起效果，就加上此样式 */
  max-width: 300px;
  /* 内容文字位置 */
  text-align: left !important;
}

/* 左侧文字位置 */
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
 text-align: right;
}

.my-label {
  text-align: right;
  width: 200px;
  color: #999;
  font-weight: normal;
  background: #fff;
}
.my-class {
  /* 给内容增加最大宽度 */
  max-width: 300px;
  /* 让内容超出列宽时自动换行显示 */
  word-break: break-all;
  word-wrap: break-word;
}


</style>